<template>
  <view class="more-nearby-page">
    <!-- 头部区域 -->
    <view class="header-section">
      <!-- 当前位置 -->
      <view class="location-bar">
        <text class="location-icon">📍</text>
        <text class="location-text">{{ currentLocation || '定位中...' }}</text>
        <view class="refresh-btn" @tap="refreshLocation">
          <text class="refresh-icon">↻</text>
        </view>
      </view>
      
      <!-- 距离选择 -->
      <view class="distance-filter">
        <view 
          v-for="(dist, index) in distanceOptions" 
          :key="index" 
          class="distance-option" 
          :class="{ active: currentDistanceIndex === index }"
          @tap="setDistance(index)"
        >
          <text>{{ dist.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 筛选条件 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index" 
          class="tab-item" 
          :class="{ active: activeFilterIndex === index }"
          @tap="setActiveFilter(index)"
        >
          <text>{{ tab.name }}</text>
        </view>
      </view>
      
      <view class="sort-btn" @tap="toggleSortPopup">
        <text>{{ currentSort.name }}</text>
        <text class="sort-icon" :class="{ 'sort-open': showSortPopup }">▼</text>
      </view>
    </view>
    
    <!-- 排序选择弹窗 -->
    <view class="sort-popup" v-if="showSortPopup">
      <view 
        v-for="(sort, index) in sortOptions" 
        :key="index" 
        class="sort-item"
        :class="{ active: currentSortIndex === index }"
        @tap="selectSort(index)"
      >
        <text>{{ sort.name }}</text>
        <text class="check-icon" v-if="currentSortIndex === index">✓</text>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="mask" v-if="showSortPopup" @tap="toggleSortPopup"></view>
    
    <!-- 附近养老院列表 -->
    <scroll-view class="nearby-list" scroll-y="true" @scrolltolower="loadMore">
      <!-- 定位中 -->
      <view class="loading-location" v-if="isLocating">
        <text class="loading-icon">🔍</text>
        <text class="loading-text">正在获取您的位置...</text>
      </view>
      
      <!-- 列表内容 -->
      <block v-if="!isLocating">
        <view v-if="nearbyList.length === 0" class="empty-nearby">
          <text class="empty-icon">📍</text>
          <text class="empty-text">附近暂无养老院</text>
        </view>
        
        <view 
          v-for="(item, index) in nearbyList" 
          :key="index" 
          class="nearby-item"
          @tap="goToDetail(item.id)"
        >
          <view class="item-image">
            <text>{{ item.image }}</text>
          </view>
          
          <view class="item-info">
            <view class="info-header">
              <text class="item-title">{{ item.name }}</text>
              <view class="distance-badge">
                <text class="distance-text">{{ item.distance }}</text>
              </view>
            </view>
            
            <view class="item-tags">
              <view v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag-item">
                <text>{{ tag }}</text>
              </view>
            </view>
            
            <view class="item-rating">
              <text v-for="n in 5" :key="n" class="star" :class="{ active: n <= item.rating }">★</text>
              <text class="rating-value">{{ item.rating }}</text>
              <text class="review-count">({{ item.reviewCount }}条评价)</text>
            </view>
            
            <view class="item-address">{{ item.address }}</view>
            
            <view class="item-bottom">
              <text class="item-price">{{ item.price }}</text>
              <view class="item-call" @tap.stop="callNursingHome(item.phone)">
                <text>联系电话</text>
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 加载状态 -->
      <view class="loading-section" v-if="isLoading && !isLocating">
        <text>加载中...</text>
      </view>
      
      <!-- 无更多数据 -->
      <view class="no-more-section" v-if="noMore && !isLoading && !isLocating && nearbyList.length > 0">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 距离选项
const distanceOptions = ref([
  { name: '1km内', value: 1 },
  { name: '3km内', value: 3 },
  { name: '5km内', value: 5 },
  { name: '10km内', value: 10 },
  { name: '全部', value: 0 }
])

// 筛选选项
const filterTabs = ref([
  { name: '全部', value: 'all' },
  { name: '公办非营利性', value: 'public_non_profit', id: 1 },
  { name: '民办非营利性', value: 'private_non_profit', id: 2 },
  { name: '公办营利性', value: 'public_profit', id: 3 },
  { name: '民办营利性', value: 'private_profit', id: 4 }
])

// 排序选项
const sortOptions = ref([
  { name: '距离优先', value: 'distance' },
  { name: '评分最高', value: 'rating' },
  { name: '价格最低', value: 'price_low' },
  { name: '价格最高', value: 'price_high' }
])

// 状态变量
const currentLocation = ref('北京市海淀区西北旺')
const isLocating = ref(false)
const currentDistanceIndex = ref(0)
const activeFilterIndex = ref(0)
const currentSortIndex = ref(0)
const currentSort = ref(sortOptions.value[0])
const showSortPopup = ref(false)
const nearbyList = ref([])
const isLoading = ref(false)
const page = ref(1)
const noMore = ref(false)

// 刷新定位
const refreshLocation = () => {
  isLocating.value = true
  
  // 模拟获取位置
  setTimeout(() => {
    currentLocation.value = '北京市海淀区西北旺'
    isLocating.value = false
    resetList()
    loadData()
  }, 1000)
}

// 设置距离筛选
const setDistance = (index) => {
  currentDistanceIndex.value = index
  resetList()
  loadData()
}

// 设置筛选条件
const setActiveFilter = (index) => {
  activeFilterIndex.value = index
  resetList()
  loadData()
}

// 切换排序弹窗
const toggleSortPopup = () => {
  showSortPopup.value = !showSortPopup.value
}

// 选择排序方式
const selectSort = (index) => {
  currentSortIndex.value = index
  currentSort.value = sortOptions.value[index]
  showSortPopup.value = false
  resetList()
  loadData()
}

// 重置列表
const resetList = () => {
  nearbyList.value = []
  page.value = 1
  noMore.value = false
}

// 加载更多
const loadMore = () => {
  if (!isLoading.value && !noMore.value && !isLocating.value) {
    page.value++
    loadData()
  }
}

// 加载数据
const loadData = () => {
  if (isLocating.value) return
  
  isLoading.value = true
  
  // 模拟请求 - 实际项目中应该调用API
  setTimeout(() => {
    // 模拟数据
    const newItems = Array.from({ length: 8 }, (_, i) => ({
      id: page.value * 10 + i,
      name: `附近养老院${page.value * 10 + i}`,
      image: '养老院图片',
      tags: ['特级护理', '医疗资源', '环境优美'].slice(0, Math.floor(Math.random() * 3) + 1),
      rating: (Math.random() * 2 + 3).toFixed(1),
      reviewCount: Math.floor(Math.random() * 100) + 10,
      address: `海淀区西北旺路${Math.floor(Math.random() * 50) + 1}号院`,
      price: `${Math.floor(Math.random() * 1000) + 2500}/月起`,
      distance: `${(Math.random() * distanceOptions.value[currentDistanceIndex.value].value).toFixed(1)}km`,
      phone: `1${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}-${Math.floor(Math.random() * 10000)}-${Math.floor(Math.random() * 10000)}`
    }))
    
    nearbyList.value = [...nearbyList.value, ...newItems]
    
    // 模拟数据加载完毕
    if (page.value >= 3) {
      noMore.value = true
    }
    
    isLoading.value = false
  }, 800)
}

// 查看详情
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  })
}

// 拨打养老院电话
const callNursingHome = (phone) => {
  uni.showModal({
    title: '确认拨打',
    content: `确认拨打养老院联系电话：${phone}`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: phone,
          fail: () => {
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      }
    }
  })
}

// 页面加载时获取数据
onMounted(() => {
  // 模拟获取位置
  isLocating.value = true
  setTimeout(() => {
    isLocating.value = false
    loadData()
  }, 800)
})
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.more-nearby-page {
  min-height: 100vh;
  position: relative;
  
  .header-section {
    background-color: #fff;
    padding: 15px 15px 5px;
    border-bottom: 1px solid rgba(195, 227, 227, 0.3);
    
    .location-bar {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      
      .location-icon {
        font-size: 16px;
        margin-right: 5px;
        color: #2c7873;
      }
      
      .location-text {
        font-size: 14px;
        color: #2c7873;
        font-weight: 600;
        flex: 1;
      }
      
      .refresh-btn {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(195, 227, 227, 0.2);
        border-radius: 50%;
        
        .refresh-icon {
          font-size: 15px;
          color: #2c7873;
        }
        
        &:active {
          background-color: rgba(195, 227, 227, 0.4);
        }
      }
    }
    
    .distance-filter {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      
      &::-webkit-scrollbar {
        display: none;
      }
      
      .distance-option {
        padding: 6px 12px;
        margin-right: 10px;
        background-color: rgba(195, 227, 227, 0.1);
        border-radius: 15px;
        transition: all 0.3s;
        
        text {
          font-size: 13px;
          color: #2c7873;
        }
        
        &.active {
          background-color: rgba(195, 227, 227, 0.3);
          
          text {
            font-weight: 600;
          }
        }
      }
    }
  }
  
  .filter-section {
    background-color: #fff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(195, 227, 227, 0.3);
    
    .filter-tabs {
      display: flex;
      align-items: center;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      
      &::-webkit-scrollbar {
        display: none;
      }
      
      .tab-item {
        padding: 6px 12px;
        margin-right: 10px;
        background-color: rgba(195, 227, 227, 0.1);
        border-radius: 15px;
        transition: all 0.3s;
        
        text {
          font-size: 13px;
          color: #2c7873;
        }
        
        &.active {
          background-color: rgba(195, 227, 227, 0.3);
          
          text {
            font-weight: 600;
          }
        }
      }
    }
    
    .sort-btn {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background-color: rgba(195, 227, 227, 0.1);
      border-radius: 15px;
      margin-left: 10px;
      
      text {
        font-size: 13px;
        color: #2c7873;
      }
      
      .sort-icon {
        font-size: 10px;
        margin-left: 3px;
        transition: transform 0.3s;
      }
      
      .sort-open {
        transform: rotate(180deg);
      }
    }
  }
  
  .sort-popup {
    position: absolute;
    top: 140px;
    right: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 101;
    min-width: 120px;
    overflow: hidden;
    
    .sort-item {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 14px;
        color: #2c7873;
      }
      
      .check-icon {
        color: #c3e3e3;
        font-weight: bold;
      }
      
      &.active {
        background-color: rgba(195, 227, 227, 0.1);
        
        text {
          color: #2c7873;
          font-weight: 600;
        }
        
        .check-icon {
          color: #2c7873;
        }
      }
      
      &:active {
        background-color: rgba(195, 227, 227, 0.2);
      }
    }
  }
  
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 100;
  }
  
  .nearby-list {
    padding: 15px;
    
    .loading-location, .empty-nearby {
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .loading-icon, .empty-icon {
        font-size: 36px;
        margin-bottom: 15px;
        color: #c3e3e3;
      }
      
      .loading-text, .empty-text {
        color: #6FB3B8;
        font-size: 14px;
      }
    }
    
    .nearby-item {
      background-color: #fff;
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .item-image {
        height: 160px;
        background-color: rgba(195, 227, 227, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        
        text {
          color: #6FB3B8;
          font-size: 16px;
        }
      }
      
      .item-info {
        padding: 12px 15px;
        
        .info-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          .item-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c7873;
            max-width: 70%;
          }
          
          .distance-badge {
            background-color: rgba(195, 227, 227, 0.3);
            padding: 3px 10px;
            border-radius: 12px;
            
            .distance-text {
              font-size: 12px;
              color: #2c7873;
              font-weight: 600;
            }
          }
        }
        
        .item-tags {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 8px;
          
          .tag-item {
            font-size: 11px;
            color: #6FB3B8;
            background-color: rgba(195, 227, 227, 0.2);
            padding: 2px 8px;
            border-radius: 10px;
            margin-right: 8px;
            margin-bottom: 5px;
          }
        }
        
        .item-rating {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          
          .star {
            font-size: 14px;
            color: #ccc;
            margin-right: 2px;
            
            &.active {
              color: #FFB422;
            }
          }
          
          .rating-value {
            font-size: 14px;
            color: #FFB422;
            font-weight: 600;
            margin-left: 5px;
          }
          
          .review-count {
            font-size: 12px;
            color: #6FB3B8;
            margin-left: 5px;
          }
        }
        
        .item-address {
          font-size: 13px;
          color: #6FB3B8;
          margin-bottom: 12px;
        }
        
        .item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .item-price {
            font-size: 16px;
            color: #FF6B6B;
            font-weight: 600;
          }
          
          .item-call {
            padding: 6px 12px;
            background-color: rgba(195, 227, 227, 0.2);
            border-radius: 15px;
            
            text {
              font-size: 12px;
              color: #2c7873;
            }
            
            &:active {
              background-color: rgba(195, 227, 227, 0.4);
            }
          }
        }
      }
    }
  }
  
  .loading-section, .no-more-section {
    text-align: center;
    padding: 15px 0;
    
    text {
      font-size: 14px;
      color: #6FB3B8;
    }
  }
}
</style> 